<template>
  <div class="page">
    <div class="breadcrumb">
      <span class="bc-item" v-for="(name,i) in breadcrumb" :key="i">{{ name }}</span>
    </div>
    <div class="task-list">
      <div class="task-item" @click="viewTask(item.id, item.type)" v-for="(item,i) in wjdcList" :key="i">
        <div class="task-icon">
          <van-icon v-if="item.finishFlag === '1'" name="success" color="#1989fa" />
          <van-icon v-if="item.finishFlag === '0'" name="cross" color="#ee0a24"/>
        </div>
        <div class="task-name">
          <span v-if="item.type === '1'">问卷 {{ i+1 }} (投诉用户问卷)</span>
          <span v-if="item.type === '2'">问卷 {{ i+1 }} (满意度低分用户)</span>
          <span v-else>问卷 {{ i+1 }} (自建问卷)</span>
          :  {{ item.userNumber }}</div>
      </div>
    </div>

    <div class="task-list">
      <div class="task-item" @click="viewTaskNew(item.id, item.type)" v-for="(item,i) in wjdcNewList" :key="i">
        <div class="task-icon">
          <van-icon name="success" color="#1989fa" />
        </div>
        <div class="task-name">
          <span>问卷 {{ i + wjdcList.length + 1 }} : </span>
          <span v-if="item.wjdcMyd === '1'" style="color: green">[满意] </span>
          <span v-else style="color: red">[不满意] </span>
          {{ item.userNumber }}
        </div>
      </div>
      <div v-if="finishFlag">
        <div style="text-align: center; position: fixed; left: 25%; right: 25%; bottom: 5%">
          <div class="form-btn disabled" >当前小区任务已完成</div>
        </div>
      </div>
      <div v-else>
        <div style="text-align: center; position: fixed; left: 25%; right: 25%; bottom: 5%">
          <div class="form-btn" @click="viewTaskNew()">新建问卷调查</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {communityWjdcNewPercent, communityWjdcPercent, getCommunityInfo} from '@/api/publicline/kdcs'

export default {
  data() {
    return {
      finishFlag: false,
      breadcrumb: [],
      wjdcList: [],
      wjdcNewList: []
    }
  },
  created() {
    const { communityId, breadcrumb } = this.$route.query;
    this.communityId = communityId;
    this.breadcrumb = breadcrumb.split('/');
    this.getCommunityInfo()
    this.getWjdcList();
    this.getWjdcListNew();
  },
  methods: {
    getCommunityInfo() {
      getCommunityInfo( { VILLAGE_ID: this.communityId } )
        .then( res => {
          if ( res.success ) {
            const data = res.result.data;
            if(data.state === '2') {
              this.finishFlag = true
            }
          }
        } )
    },
    getWjdcList() {
      communityWjdcPercent({ VILLAGE_ID: this.communityId })
      .then(
        res => {
          if (res.success) {
            const data = res.result
            this.wjdcList = data.list
          }
        }
      )
    },
    getWjdcListNew() {
      communityWjdcNewPercent({ VILLAGE_ID: this.communityId })
        .then(
          res => {
            if (res.success) {
              const data = res.result
              this.wjdcNewList = data.list
              console.log(this.wjdcNewList)
            }
          }
        )
    },
    viewTask(id, type) {
      console.log(id)
      this.$router.push( {
        // path: "/publicline/kdcs/wjdc-form",
        path: "/publicline/kdcs/wjdc-form",
        query: {
          communityId: this.communityId,
          wjdcId: id,
          type: (type === '1' || type === '2') ? type : '3',
          breadcrumb: this.breadcrumb.concat([name]).join('/')
        }
      } )
    },
    viewTaskNew(id, type) {
      this.$router.push( {
        // path: "/publicline/kdcs/wjdc-form",
        path: "/publicline/kdcs/wjdc-form-new",
        query: {
          communityId: this.communityId,
          wjdcId: id,
          type: (type === '1' || type === '2') ? type : '3',
          breadcrumb: this.breadcrumb.concat([name]).join('/')
        }
      } )
    },
    deleteWjdc(id) {
      console.log(id
      )
    }
  }
}
</script>

<style lang="less" scoped>
.form-btn {
  padding: 10px 10px;
  border-radius: 4px;
  background: #008cff;
  color: #FFF;

  &.danger {
    background: #ff3700;
    color: #FFF;
  }
}
.page {
  background: #FFF;
}
.breadcrumb {
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  padding: 6px 10px;
  background: #f2f9ff;

  .bc-item {
    color: #888;

    &:after {
      content: " / ";
    }

    &:last-child {
      color: #000;

      &:after {
        content: "";
      }
    }
  }
}
.task-list {
  padding: 5px 0;

  .disabled {
    background: #EEE;
    color: #777;
    border-color: #ccc;
  }

  .task-item {
    padding: 6px 16px;
    margin: 14px auto;
    display: flex;
    border: 1px solid #333;
    border-radius: 6px;
    width: 70%;
    // justify-content: space-between;
    align-items: center;
    justify-content: left;
    flex-direction: initial;

    .task-icon {
      width: 20px;
      height: 40px;
      text-align: left;
      line-height: 40px;
    }
    .task-name {
    }
    .task-percent {
      width: 100px;
      text-align: right;
    }
  }
}
</style>